<template>
  <view class="class_learn">
    <video id="myVideo" src="http://120.46.150.252:10004/static/video/test.mp4" controls="true"></video>
    <view class="nav">
      <view class="title">
        第一节 函数
      </view>
      <view class="section">
        <ul>
          <li v-for="(item,index) in section" :key="item.id" class="section_item">
            <view class="section_title">
              {{index+1}}、{{item.title}}
            </view>
          </li>
        </ul>
      </view>
    </view>
    <view class="recommend">
      <view class="title">
        相关推荐
      </view>
      <ul>
        <li>金牌考研课</li>
        <li>四六级冲刺</li>
        <li>计算机等级证书</li>
      </ul>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        section: [{
            id: 7001,
            title: '函数',
            type: '视频'
          },
          {
            id: 7002,
            title: '导数',
            type: '视频'
          },
        ]
      };
    }
  }
</script>

<style lang="less">
  .class_learn {
    #myVideo {
      width: 100%;
      height: 400rpx;
    }

    .nav {
      margin: 15rpx;
      padding: 20rpx;
      height: 200rpx;
      background-color: #fff;
      border-radius: 30rpx;

      .title {
        font-size: 40rpx;
        font-weight: 600;
      }

      .section {
        margin-top: 20rpx;
        background-color: #fff;
        border-radius: 30rpx;

        ul {
          display: flex;
          justify-content: space-between;
          .section_item {
            padding: 10rpx;
            width: 300rpx;
            height: 100rpx;
            line-height: 100rpx;
            background-color: #ebebeb;
            border-radius: 15rpx;
          }
        }

      }
    }
    .recommend {
      margin: 15rpx;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 15rpx;
    .title {
      font-size: 40rpx;
      font-weight: 600;
    }
    ul {
      li {
        height: 100rpx;
        font-size: 36rpx;
        line-height: 100rpx;
      }
    }
    }
  }
</style>
